@mixin flex($direction: row) {
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    flex-direction: $direction;
}

.standard {
    width: 100vw;
    display: flex;
    flex-direction: column;
    padding: 30rpx;
    .top-bar {
        padding: 10rpx 30rpx;
        display: flex;
        line-height: 60rpx;
        position: fixed;
        top: 0;
        /* #ifdef H5 */
        top: 44px;
        /* #endif */
        left: 0;
        width: 100%;
        background-color: white;
        z-index: 99;
        align-items: center;
        .top-content {
            flex: 1;
            font-weight: bold;
            padding-left: 20rpx;
            .right {
                font-size: 34rpx;
                color: $cf-primary;
                .head {
                    font-size: 28rpx;
                    color: #333333;
                }
            }
        }
    }
    .action-btns {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        background-color: white;
        z-index: 10;
    }
}
.content {
    .title {
        @include flex;
        justify-content: space-between;
        margin-bottom: 20rpx;
        .btn {
            font-size: 24rpx;
            text {
                margin-left: 10rpx;
            }
        }
    }
}
.min-height {
    min-height: 300rpx;
}
// 领型
.collar_type {
    margin-bottom: 20rpx;
}
.collar_type-list {
    display: flex;
    flex-wrap: wrap;
    margin-top: 20rpx;
    .collar-wrapper{
        @include flex(column);
        width: calc((100% - 40rpx) / 3);
        margin-right: 20rpx;
        // 超出限购提醒
        .limit-warning{
            text-align: center;
            font-size: 24rpx;
            color: #8C8C8C;
        }
    }
    .collar-wrapper:nth-child(3n + 0) {
        margin-right: 0;
    }
    .collar-item {
        margin-bottom: 20rpx;
        border-radius: 10rpx;
        position: relative;
        box-shadow: 2rpx 2rpx 6rpx rgba(0, 0, 0, 0.2);
        .collarActived {
            background-color: $cf-primary;
            color: white;
        }
    }

    .collar-name {
        overflow: hidden;
        font-size: 26rpx;
        text-align: center;
        border-radius: 0 0 10rpx 10rpx;
        background-color: white;
        padding: 4rpx 0;
    }
}
.skus-color-btns {
    display: flex;
    flex-wrap: wrap;
    .skus-color-item {
        width: calc((100% - 40rpx) / 3);
        margin-right: 20rpx;
        margin-bottom: 20rpx;
        border-radius: 10rpx;
        position: relative;
        box-shadow: 2rpx 2rpx 6rpx rgba(0, 0, 0, 0.2);
        &-name {
            overflow: hidden;
            font-size: 26rpx;
            line-height: 30rpx;
            text-align: center;
            border-radius: 0 0 10rpx 10rpx;
            // margin-top: -8rpx;
            background-color: white;
            padding: 4rpx 0;
        }
        &-checked {
            background-color: $cf-primary;
            color: white;
        }
        .sale-out {
            width: 120rpx;
            height: 120rpx;
            position: absolute;
            top: 50rpx;
            left: calc(50% - 60rpx);
            background: rgba(#000000, 0.6);
            color: white;
            line-height: 120rpx;
            text-align: center;
            border-radius: 50%;
        }
        .sale-out-name {
            background-color: #bababa !important;
            color: white;
        }
        .sku-num {
            margin-top: 2rpx;
            background: rgba($color: #ffffff, $alpha: 0.8);
            color: #ab4e32;
            border-radius: 10rpx;
            display: flex;
            flex-direction: column;
            text-align: center;
            height: 280rpx;
            .sku-list {
                display: flex;
                flex-direction: column;
                justify-content: center;
                flex: 1;
                align-items: center;
                .sku-sub-left {
                    display: inline-block;
                    width: 30px;
                    text-align: right;
                    font-size: 26rpx;
                }
                .sku-sub-center {
                    margin: 0 10rpx;
                }
                .sku-sub-right {
                    text-align: left;
                    display: inline-block;
                    width: 30px;
                    font-size: 26rpx;
                }
            }
            &-undefined {
                color: #c77e68;
                font-size: 22rpx;
                display: flex;
                flex-direction: column;
                justify-content: center;
                flex: 1;
                overflow: hidden;
            }
        }
    }
    .skus-color-item:nth-child(3n + 0) {
        margin-right: 0;
    }
}

.sku-image {
    border-radius: 10rpx 10rpx 0 0;
}

:deep(.u-drawer-bottom) {
    background: transparent;
}
.border-bottom {
    border-bottom: 1rpx solid #f5ebe6;
    min-width: 180rpx;
    display: inline-block;
    line-height: 40rpx;
}
